<!-- 轮播图 -->
<template>
  <div class="course_page">
    <h2>轮播图展示页面</h2>

    <!-- 自定义轮播图组件 -->
    <div class="carousel">
      <!-- 轮播图 -->
      <carousel
        :autoPlay="true"
        :druation="3000"
        :initializeIndex="0"
        :color="`#FD8706`"
      >
        <!-- 轮播图子组件 -->
        <carouselItem v-for="(item, index) in bannerArr" :key="index">
          <img :src="item.name" />
        </carouselItem>
      </carousel>
    </div>
  </div>
</template>

<script setup>
import img1 from "../../../assets/img/img1.jpg";
import img2 from "../../../assets/img/img2.jpg";
import img3 from "../../../assets/img/img3.jpg";
import img4 from "../../../assets/img/img4.jpg";
//轮播图的数据
const bannerArr = reactive([
  {
    id: 0,
    name: img1,
  },
  {
    id: 1,
    name: img2,
  },
  {
    id: 2,
    name: img3,
  },
  {
    id: 3,
    name: img4,
  },
]);
</script>
<style lang="scss" scoped>
.carousel {
  width: 590px;
  height: 470px;
  overflow: hidden;
  position: relative;
}
</style>
